<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-03-06 23:45:19"
-->
<template>
  <v-select
    :loading="loading"
    :items="items"
    :value="value"
    @input="inputHandle"
    loader-height="2"
    chips
    :menu-props="{}"
    label="选择用户"
    item-text="wx_nickname"
    item-value="wx_openid"
    :multiple="multiple"
  >
    <template v-slot:prepend-item>
      <v-text-field label="输入用户名称关键字" solo hide-details flat v-model="nickname" @input="fetchData"></v-text-field>
      <v-divider class="mt-2"></v-divider>
      </template>
  </v-select>
</template>
<script>
import * as API from '@/api/admin/wx-member.js'
export default {
  name: 'WxMemberSelect',
  components: {},
  props: {
    value: [ String, Array ],
    multiple: Boolean
  },
  data: function () {
    return {
      loading: false,
      items: [],
      nickname: ''
    }
  },
  created: function () {
    this.fetchData('')
  },
  computed: {
  },
  methods: {
    fetchData() {
      this.loading = true
      API.fetchList({ page: 1, page_size: 10, search: { wx_nickname: this.nickname } }).then(res => {
        this.items = res.data.data
      }).finally(() => {
        this.loading = false
      })
    },
    inputHandle(openid) {
      this.$emit('input', openid)
    }
  }
}
</script>
<style scoped>
</style>
